<template>
  <div>
     <section class="todoapp">
    <TodoHeader :arr='list' @create="createFn" ></TodoHeader>
    <TodoMain :arr="showArr" @del='deleteFn'></TodoMain>
    <TodoFooter :farr='showArr' @changeType='typeFn' @clear='clearFun'></TodoFooter>
      </section>
  </div>
</template>

<script>

// 1.0 样式引入
import './styles/base.css'
import './styles/index.css'
// 1.1组件引入
import TodoHeader from './components/todoHeader'
import TodoMain from './components/todoMain'
import TodoFooter from './components/todoFooter'
export default {
  // 1.2 组件注册
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data () {
    return {
      // 2.0 数据准备好
       list: JSON.parse(localStorage.getItem('todoList')) || [],
      // 6.4中转接收类型字符串
      getSel:'all' //默认显示全部
    }
  },
  methods: {
    createFn(taskName){
      // 添加任务
      // 3.3push到数组中
      let id = this.list.length==0?100:this.list[this.list.length-1].id+1
      this.list.push({
        id:id,
        name:taskName,
        isDone:false
      })
    },
   deleteFn(ind){
      this.list.splice(ind,1)
    },
    typeFn(str){
      if (str) {
        this.getSel = str
      }
    },
    clearFun(){//清空以完成的任务
      this.list = this.list.filter(obj=>obj.isDone == false)
    }
  },
  // 6.5 定义showArr数组 - 通过list配合条件筛选而来
  computed: {
     showArr(){
      if (this.getSel === 'yes') {
        return this.list.filter(obj => obj.isDone === true)
      } else if(this.getSel === 'no'){
        return this.list.filter(obj => obj.isDone === false)
      }else{
        return this.list
      }
    }
  },

  watch: {
    list:{
      deep:true,
      handler(){
        // 8.0 只要list变化 - 覆盖式保存到localStorage里
        localStorage.setItem('todoList',JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style>

</style>